<template>
  <div>
    <el-table :data="list">
      <el-table-column align="center" label="编号" width="80">
        <template slot-scope="{ row }">
          <span v-show="!row.editid">{{ row.id }}</span>
          <el-input v-show="row.editid" v-model="row.id"></el-input>
        </template>
      </el-table-column>

      <el-table-column width="180px" label="名称">
        <template slot-scope="{ row }">
          <span v-show="!row.editname">{{ row.name }}</span>
          <el-input v-show="row.editname" v-model="row.name"></el-input>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{ row }">
          <el-button
            v-show="!row.editid"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="row.editid = !row.editid"
          >
            编辑id
          </el-button>
          <el-button
            v-show="!row.editname"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="row.editname = !row.editname"
          >
            编辑名称
          </el-button>
          <el-button
            v-show="row.editid || row.editname"
            type="success"
            size="mini"
            icon="el-icon-circle-check-outline"
            @click="(row.editid = false) || (row.editname = false)"
          >
            Ok
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "growth",
  data() {
    return {
      list: [
        { id: "1", name: "法外狂徒", editid: false, editname: false },
        { id: "2", name: "张三", editid: false, editname: false }
      ]
    };
  }
};
</script>

<style scoped></style>
